<template>
  <div class="news-item click cursor-pointer click">
    <mx-link :to="`${NEWS_PAGE_PATH_MAP[obj.news_type]}/${obj.news_id}`">
      <t-image
        class="img img-cover mb-8"
        :class="{
            'vlog-cover': (obj.news_type || obj.newsType) == NEWS_TYPE.VLOG
          }"
        :src="obj.thumbs && obj.thumbs[0] || ''"
        alt=""
      />
      <icon v-if="(obj.news_type || obj.newsType) != NEWS_TYPE.ARTICLE" class="video-btn" size="40px" name="ic_play" />
      <p class="title ov-2">
        {{ obj.title }}
      </p>
      <p class="time">{{ obj.release_timestamp | duration }}</p>
    </mx-link>
  </div>
</template>

<script>
import { NEWS_TYPE, NEWS_PAGE_PATH_MAP } from '@/constants/index.js';

export default {
  props: {
    obj: {
      type: Object,
      default: () => {}
    }
  },

  data() {
    return {
      NEWS_TYPE,
      NEWS_PAGE_PATH_MAP
    };
  }
};
</script>

<style lang="scss" scoped>
.news-item {
  width: 356px;
  height: 284px;
  padding: 12px 16px;
  position: relative;

  .img {
    width: 324px;
    height: 182px;
    border: 0.5px solid rgba(42, 60, 88, 0.1);
    border-radius: 8px;
  }
  .vlog-cover {
    width: 324px;
    height: 182px;
    padding: 0 98px;
    background: #000;
    border-radius: 8px;
  }

  .video-btn {
    position: absolute;
    left: 158px;
    top: 83px;
    z-index: 100;
  }

  .title {
    font-size: 17px;
    color: #0c0c1c;
    letter-spacing: 0;
    line-height: 26px;
    font-weight: 500;
    margin-bottom: 2px;
  }

  .time {
    font-size: 12px;
    color: rgba(12, 12, 28, 0.7);
    letter-spacing: 0;
    line-height: 16px;
  }
}
</style>
